<!--
 * @Author: Olivia
 * @Date: 2022-05-26 22:41:15
 * @LastEditTime: 2023-02-13 23:25:13
 * @FilePath: \toutiao-m\src\views\layout\home\index.vue
 * @custom_string_Olivia: Less is more
-->
<template>
    <div class="my-container">
        <!-- 已登录 -->
        <div v-if="user" class="user-info header">
            <!-- 基本信息 -->
            <div class="base-info">
                <div class="left">
                    <van-image class="avatar" :src="userInfo.photo" round fit="cover" />
                    <span class="name">{{ userInfo.name }}</span>
                </div>
                <div class="right">
                    <van-button type="default" size="mini" round to="/user/profile">编辑资料</van-button>
                </div>
            </div>
            <!-- 粉丝、关注 -->
            <div class="data-stats">
                <div class="data-item">
                    <span class="count">{{ userInfo.art_count }}</span>
                    <span class="text">头条</span>
                </div>
                <div class="data-item">
                    <span class="count">{{ userInfo.follow_count }}</span>
                    <span class="text">关注</span>
                </div>
                <div class="data-item">
                    <span class="count">{{ userInfo.fans_count }}</span>
                    <span class="text">粉丝</span>
                </div>
                <div class="data-item">
                    <span class="count">{{ userInfo.like_count }}</span>
                    <span class="text">点赞</span>
                </div>
            </div>
            <!-- 导航 -->
            <van-grid class="grid-nav" clickable :column-num="2">
                <van-grid-item class="grid-item">
                    <i slot="icon" class="toutiao toutiao-shoucang"></i>
                    <span class="text" slot="text">收藏</span>
                </van-grid-item>
                <van-grid-item class="grid-item">
                    <i slot="icon" class="toutiao toutiao-lishi"></i>
                    <span class="text" slot="text">历史</span>
                </van-grid-item>
            </van-grid>
            <van-cell title="消息通知" is-link />
            <van-cell title="小智同学" is-link />
            <van-cell v-if="user" clickable @click="onLogout" class="logout-cell" title="退出登录" center />
            <!-- /导航 -->
        </div>
        <!-- 未登录 -->
        <div v-else class="header not-login" @click="$router.push('/login')">
            <img src="~@/assets/mobile.png" alt="" class="mobile-img" />
            <span class="text"> 登录 / 注册 </span>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import { getUserInfo } from '../../api/user'
export default {
    name: '',
    data() {
        return {
            userInfo: {}
        }
    },
    created() {
        if (this.user) {
            this.loadUserInfo()
        }
    },
    computed: {
        ...mapState(['user'])
    },
    methods: {
        onLogout() {
            // 退出提示
            this.$dialog
                .confirm({
                    title: '确认退出吗？'
                })
                .then(() => {
                    // on confirm
                    this.$store.commit('setUser', null)
                })
                .catch(() => {
                    // on cancel
                })
        },
        async loadUserInfo() {
            try {
                const { data } = await getUserInfo()
                this.userInfo = data.data
            } catch (error) {
                this.$toast.fail(error.message)
            }
        }
    }
}
</script>
<style lang="less" scoped>
.my-container {
    .header {
        height: 361px/2;
        background: url(~@/assets/banner.png);
        background-size: cover;
    }

    .mobile-img {
        width: 132px/2;
        height: 132px/2;
    }

    .text {
        margin-top: 15px;
        color: #fff;
    }
}

.not-login {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.user-info {
    height: 130px/2;

    .base-info {
        height: 231px/2;
        padding: 38px 16px 11.5px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
            display: flex;
            align-items: center;
            color: #fff;

            .avatar {
                width: 132px/2;
                height: 132px/2;
                border: 2px solid #fff;
                margin-right: 11px;
            }

            .name {
                font-size: 29px/2;
            }
        }
    }

    .data-stats {
        display: flex;
        justify-content: space-around;

        .data-item {
            color: #fff;
            height: 130px;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;

            .count {
                font-size: 18px;
            }

            .text {
                font-size: 11.5px;
            }
        }
    }
}

.grid-nav {
    .grid-item {
        height: 141px/2;

        i.toutiao {
            font-size: 45px/2;
        }

        .toutiao-shoucang {
            color: #eb5253;
        }

        span.text {
            font-size: 14px;
            color: black;
        }

        .toutiao-lishi {
            color: #ff9d1d;
        }
    }
}

.logout-cell {
    height: 50px;
    color: #eb5253;
    font-size: 15px;
    text-align: center;
    margin: 5px 0;
}

.user-info .data-stats .data-item[data-v-7a3d5949] {
    height: 65px;
}
</style>
